'use client';

import { useLocale } from './IntlProvider';
import { useTranslations } from 'next-intl';

export function LanguageSwitcher() {
  const { locale, setLocale } = useLocale();
  const t = useTranslations('common');

  const handleLanguageChange = (newLocale: 'zh' | 'en') => {
    setLocale(newLocale);
  };

  return (
    <div className="flex items-center gap-4 p-4 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600 rounded-lg shadow-lg transition-colors">
      <div className="text-white font-medium">
        {t('currentLanguage')}:{' '}
        <span className="font-bold">
          {locale === 'zh' ? '中文' : 'English'}
        </span>
      </div>
      <div className="flex gap-2">
        <button
          onClick={() => handleLanguageChange('zh')}
          className={`px-4 py-2 rounded-md font-medium transition-all ${
            locale === 'zh'
              ? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-md'
              : 'bg-blue-600 dark:bg-blue-700 text-white hover:bg-blue-700 dark:hover:bg-blue-800'
          }`}
        >
          中文
        </button>
        <button
          onClick={() => handleLanguageChange('en')}
          className={`px-4 py-2 rounded-md font-medium transition-all ${
            locale === 'en'
              ? 'bg-white dark:bg-gray-800 text-purple-600 dark:text-purple-400 shadow-md'
              : 'bg-purple-600 dark:bg-purple-700 text-white hover:bg-purple-700 dark:hover:bg-purple-800'
          }`}
        >
          English
        </button>
      </div>
    </div>
  );
}
